<template>
  <div>
    <v-layout>
      <v-flex xs9>
        <v-btn color="info">新增品牌</v-btn>
      </v-flex>
      <v-flex xs3>
        <v-text-field
            label="搜索"
            append-icon="search"
        ></v-text-field>
      </v-flex>
    </v-layout>

    <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
    >
      <template v-slot:items="props">
        <tr>
          <td class="text-xs-center">{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center">{{ props.item.image }}</td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="text-xs-center">
            <v-btn flat icon color="green" small>
              <v-icon small>edit</v-icon>
            </v-btn>
            <v-btn flat icon color="red" small>
              <v-icon small>delete</v-icon>
            </v-btn>
          </td>
        </tr>
      </template>
    </v-data-table>
  </div>
</template>

<script>
  export default {
    name: "MyBrand",
    data() {
      return {
        totalBrands: 21,
        brands: [],
        loading: true,
        pagination: {},
        headers: [
          { text: '品牌id', align: 'center', value: 'id'},
          { text: '品牌名称', align: 'center', sortable: false, value: 'name' },
          { text: '品牌LOGO', align: 'center', sortable: false, value: 'image' },
          { text: '首字母', align: 'center', value: 'letter' },
          { text: '操作', align: 'center', sortable: false, value: 'letter' }
        ]
      }
    },
    created(){
      // 加载页面的数据
      this.loadData();
    },
    methods:{
      loadData(){
        // 发ajax，查询页面数据
        this.$http.get("/item/brand/page", {
          params: {
            page: 1,
            size: 5
          }
        }).then(resp => console.log(resp))
          .catch(error => console.log(error))
        // 给假数据
        this.brands =[
          {id: 1001, name: "小米9", image: "1.jpg", letter: "X"},
          {id: 1001, name: "小米9", image: "1.jpg", letter: "X"},
          {id: 1001, name: "小米9", image: "1.jpg", letter: "X"},
          {id: 1001, name: "小米9", image: "1.jpg", letter: "X"},
          {id: 1001, name: "小米9", image: "1.jpg", letter: "X"}
        ]
      }
    }
  }
</script>

<style scoped>

</style>